<template>
	<ul class="background">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</template>

<script>
	export default {
		name: "animated",
		data() {
			return {

			};
		}
	}
</script>

<style>
	@keyframes animate {
		0% {
			transform: translateY(0) rotate(0deg);
			opacity: 1;
			border-radius: 0;
		}

		100% {
			transform: translateY(-1000px) rotate(720deg);
			opacity: 0;
			border-radius: 50%;
		}
	}

	.background {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		z-index: -1;
		background: #000;
		overflow: hidden;
	}

	.background li {
		position: absolute;
		display: block;
		list-style: none;
		width: 20px;
		height: 20px;
		background: rgba(255, 102, 1, 0.5);
		animation: animate 10s linear infinite;
	}




	.background li:nth-child(0) {
		left: 21%;
		width: 73px;
		height: 73px;
		bottom: -73px;
		animation-delay: 1s;
	}

	.background li:nth-child(1) {
		left: 59%;
		width: 69px;
		height: 69px;
		bottom: -69px;
		animation-delay: 2s;
	}

	.background li:nth-child(2) {
		left: 63%;
		width: 17px;
		height: 17px;
		bottom: -17px;
		animation-delay: 2s;
	}

	.background li:nth-child(3) {
		left: 20%;
		width: 41px;
		height: 41px;
		bottom: -41px;
		animation-delay: 3s;
	}

	.background li:nth-child(4) {
		left: 11%;
		width: 48px;
		height: 48px;
		bottom: -48px;
		animation-delay: 9s;
	}

	.background li:nth-child(5) {
		left: 44%;
		width: 25px;
		height: 25px;
		bottom: -25px;
		animation-delay: 8s;
	}

	.background li:nth-child(6) {
		left: 44%;
		width: 21px;
		height: 21px;
		bottom: -21px;
		animation-delay: 22s;
	}

	.background li:nth-child(7) {
		left: 24%;
		width: 69px;
		height: 69px;
		bottom: -69px;
		animation-delay: 35s;
	}

	.background li:nth-child(8) {
		left: 28%;
		width: 45px;
		height: 45px;
		bottom: -45px;
		animation-delay: 39s;
	}

	.background li:nth-child(9) {
		left: 53%;
		width: 17px;
		height: 17px;
		bottom: -17px;
		animation-delay: 20s;
	}

	.background li:nth-child(10) {
		left: 34%;
		width: 7px;
		height: 7px;
		bottom: -7px;
		animation-delay: 45s;
	}

	.background li:nth-child(11) {
		left: 37%;
		width: 33px;
		height: 33px;
		bottom: -33px;
		animation-delay: 28s;
	}

	.background li:nth-child(12) {
		left: 11%;
		width: 26px;
		height: 26px;
		bottom: -26px;
		animation-delay: 2s;
	}

	.background li:nth-child(13) {
		left: 68%;
		width: 24px;
		height: 24px;
		bottom: -24px;
		animation-delay: 40s;
	}

	.background li:nth-child(14) {
		left: 17%;
		width: 13px;
		height: 13px;
		bottom: -13px;
		animation-delay: 18s;
	}

	.background li:nth-child(15) {
		left: 52%;
		width: 1px;
		height: 1px;
		bottom: -1px;
		animation-delay: 17s;
	}

	.background li:nth-child(16) {
		left: 17%;
		width: 38px;
		height: 38px;
		bottom: -38px;
		animation-delay: 3s;
	}

	.background li:nth-child(17) {
		left: 18%;
		width: 14px;
		height: 14px;
		bottom: -14px;
		animation-delay: 30s;
	}

	.background li:nth-child(18) {
		left: 11%;
		width: 75px;
		height: 75px;
		bottom: -75px;
		animation-delay: 51s;
	}

	.background li:nth-child(19) {
		left: 31%;
		width: 60px;
		height: 60px;
		bottom: -60px;
		animation-delay: 42s;
	}

	.background li:nth-child(20) {
		left: 71%;
		width: 52px;
		height: 52px;
		bottom: -52px;
		animation-delay: 96s;
	}

	.background li:nth-child(21) {
		left: 13%;
		width: 30px;
		height: 30px;
		bottom: -30px;
		animation-delay: 86s;
	}

	.background li:nth-child(22) {
		left: 75%;
		width: 57px;
		height: 57px;
		bottom: -57px;
		animation-delay: 45s;
	}

	.background li:nth-child(23) {
		left: 9%;
		width: 7px;
		height: 7px;
		bottom: -7px;
		animation-delay: 61s;
	}

	.background li:nth-child(24) {
		left: 20%;
		width: 67px;
		height: 67px;
		bottom: -67px;
		animation-delay: 73s;
	}
</style>